<script lang="tsx" setup>
/**
 * 设备统计
 */
import {ref, watch} from "vue"

/**
 * 定义prop
 */
const props = defineProps<{
  deviceTotalData: any
}>()

/**
 * 数据列表
 */
const list: any = ref([])

/**
 * 监视
 */
watch(() => props.deviceTotalData, (newValue) => {
  if (newValue) {
    list.value = newValue
  }
}, {
  deep: true,
  immediate: true
})
</script>

<template>
  <div class="device-total">
    <div class="list">
      <div v-for="(item,index) in list" :key="index" class="item">
        <img :src="item.src" alt="" class="item-img"/>
        <div class="item-title">
          {{ item.title }}
        </div>
        <div class="item-data">
          {{ item.data }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">

</style>